var xHRObject = new XMLHttpRequest();

var max;

function getComments(setName,slotDirectory, slotIndex, slotName, slotOwnerUserName, loggedInUserName) {
        
//        userN = usernameTrackOwner;
//        trackN = trackname;
	
		max = 5;

        xHRObject.open("GET", "ManageTrackAjaxServlet?getTrackComments=1&setName="+encodeURIComponent(setName)+"&setOwnerUserName="+encodeURIComponent(slotOwnerUserName)+"&slotDirectory="+encodeURIComponent(slotDirectory)+"&slotIndex=" + encodeURIComponent(slotIndex) ) ;
    
    xHRObject.onreadystatechange = function() {
    	if (xHRObject.readyState == 4) {
    		if (xHRObject.status == 200) {
    			getData(setName,slotDirectory, slotIndex, slotName, slotOwnerUserName, loggedInUserName);
    		}
    	}
    };
    xHRObject.send(null);   
}

function getData (setName,slotDirectory, slotIndex, slotName, slotOwnerUserName, loggedInUserName) {
//	if (xHRObject.readyState == 4) {
//		if (xHRObject.status == 200) {
            
            try{
                var serverResponse = xHRObject.responseXML;
                
                var setRating = serverResponse.getElementsByTagName("setAverageRating");
                var divSetDescription = document.getElementById("setDescription" + setName + loggedInUserName);
                if(divSetDescription != null)
                {
                	divSetDescription.innerHTML = "";
                	divSetDescription.innerHTML += "Average rating of the set:<img src=\"http://chart.apis.google.com/chart?chs=100x50&chxt=x&chxl=0:|0|1|2|3|4|5&chxp=0,0,20,40,60,80,100&cht=bhs&chm=N*f2*,000000,0,-1,11&chd=t:"+setRating[0].childNodes[0].textContent+"&chds=0,5\" />"
                }
                
                
                var rating = serverResponse.getElementsByTagName("slotAverageRating");
                var divDescription = document.getElementById("description" + slotDirectory + slotIndex);
                divDescription.innerHTML = "";
                divDescription.innerHTML = slotName+" with an average rating of <img src=\"http://chart.apis.google.com/chart?chs=100x50&chxt=x&chxl=0:|0|1|2|3|4|5&chxp=0,0,20,40,60,80,100&cht=bhs&chd=t:"+rating[0].childNodes[0].textContent+"&chds=0,5&chm=N*f2*,000000,0,-1,11\"/>"
                
                var header = serverResponse.getElementsByTagName("track_comment");
                var divComments = document.getElementById("comments" + slotDirectory + slotIndex);//this is the div
                
//                alert(header[0].childNodes[1].textContent);
                
                divComments.innerHTML = "";
                for (i=0; i<header.length; i++) {
//                    tableComments.innerHTML += "<tr><td>"+header[i].childNodes[1].textContent+": "+ header[i].childNodes[3].textContent +"</td></tr>";
                	divComments.innerHTML += "<div class=\"comment\">"
                							+"<p>by <span class=\"bold\">"+header[i].childNodes[0].textContent+ "</span>, "
                							+header[i].childNodes[3].textContent+ "<br />"
                							+ "<span class=\"commentText\">\"" +header[i].childNodes[2].textContent+ "\"</span><br />"
                							+ "<img src=\"http://chart.apis.google.com/chart?chs=100x50&chxt=x&chxl=0:|0|1|2|3|4|5&chxp=0,0,20,40,60,80,100&cht=bhs&chd=t:"+header[i].childNodes[1].textContent+"&chds=0,5\"/></p></div>";
                }
                
                	//comment field
                if(loggedInUserName != "")
                {
                	divComments.innerHTML += "<div id=\"commentDiv\">"
                						+ "<textarea rows=\"10\" cols=\"5\" id=\"commentTextOn"+slotDirectory+slotIndex+"\" ></textarea>"
                						+ "<select class=\"medium\" id=\"commentRatingOn"+slotDirectory+slotIndex+"\">"
                						+ "<option value=\"1\">Rating of: 1</option>"
										+ "<option value=\"2\">Rating of: 2</option>"
										+ "<option value=\"3\">Rating of: 3</option>"
										+ "<option value=\"4\">Rating of: 4</option>"
										+ "<option value=\"5\">Rating of: 5</option>"
										+ "</select>"
										+ "<button class=\"submit\" onclick=\"submitComment('"+setName+"','commentTextOn"+slotDirectory+slotIndex+"', '"+slotDirectory+"', '"+slotIndex+"', '"+slotOwnerUserName+"', '"+slotName+"', 'commentRatingOn"+slotDirectory+slotIndex+"','"+loggedInUserName+"')\">Submit Comment</button>";
                						+ "</div>";
                }
                	//reset button					
                divComments.innerHTML+="<button class=\"submit\" onclick=\"hideComments('"+setName+"','"+slotDirectory+"','"+slotIndex+"','"+slotName+"','"+slotOwnerUserName+"','"+loggedInUserName+"')\">Hide Comments</button>";
                
            }catch(e){}
            finally{//Clear the object and call the checkMessages function in 5 seconds
                xHRObject.abort();
            }
            
                
//        }
//    }
}//end getData

function submitComment(setName,idTextArea, slotDirectory, slotIndex, slotOwnerUserName, slotName, idRatingSelect, commentAuthorUserName)
{
	var textArea = document.getElementById(idTextArea);
	var comment = textArea.value;
	textArea.value = "";
	
	var select = document.getElementById(idRatingSelect);
	var rating = select.options[select.selectedIndex].value;
    
    var request = "addComment&setName="+encodeURIComponent(setName)+"&setOwnerUserName="+encodeURIComponent(slotOwnerUserName)+"&comment="+encodeURIComponent(comment)+"&rating="+encodeURIComponent(rating)+"&slotDirectory="+encodeURIComponent(slotDirectory)+"&slotName="+slotName+"&slotIndex="+encodeURIComponent(slotIndex)+"&commentAuthorUserName=" + encodeURIComponent(commentAuthorUserName);
    xHRObject.open("POST", "ManageTrackAjaxServlet","true"); //post want we gaan database aapassen
    xHRObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xHRObject.onreadystatechange = function() {
    	if (xHRObject.readyState == 4) {
    		if (xHRObject.status == 200) {
    			getData(setName, slotDirectory, slotIndex, slotName, slotOwnerUserName, commentAuthorUserName);
    		}
    	}
    };
    xHRObject.send(request);
}

function hideComments(setName, slotDirectory, slotIndex, slotName, slotOwnerUserName, loggedInUserName)
{
	var divComments = document.getElementById("comments" + slotDirectory + slotIndex);
	divComments.innerHTML="";
	divComments.innerHTML="<p>Comments on: "+slotName+" ("+slotOwnerUserName+") <a onclick=\"getComments('"+setName+"','"+slotDirectory+"','"+slotIndex+"','"+slotName+"','"+slotOwnerUserName+"', '"+loggedInUserName+"')\">Comments</a></p>";
}